<template>
    <el-row :gutter="5">
        <el-col :sm="1" :xs="5">
            <el-button type="primary" size="small" @click="addProductDialogVisible = true" :icon="Plus"></el-button>
        </el-col>
        <el-col :sm="1" :xs="5">
            <el-button type="info" size="small" @click="getData" :icon="RefreshRight"></el-button>
        </el-col>
        <el-col :sm="6" :xs="24">
            <el-input v-model="queryForm.keyword" placeholder="搜索" class="input-with-select">
                <template #append>
                    <el-button :icon="Search" @click="getData"/>
                </template>
            </el-input>
        </el-col>
    </el-row>
    <el-divider />
    <el-table v-loading="loading" :data="productList" align="center">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="category.name" label="分类" />
        <el-table-column prop="description" label="详情" />
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)" :icon="Edit"></el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)" :icon="Delete"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="queryForm.page" v-model:page-size="queryForm.limit"
        :page-sizes="[10, 50, 200, 500]" background layout="total, sizes, prev, pager, next" :total="total"
        @size-change="getData" @current-change="getData" />
    <!-- 修改商品弹窗 -->
    <EditProductDialog v-if="editProduct" :product="editProduct" @close="editProduct = null" @done="onEditDone" />
    <!-- 添加商品弹窗 -->
    <AddProductDialog v-if="addProductDialogVisible" :product="editProduct" @close="addProductDialogVisible = false" @done="onAddDone" />
</template>

<script setup>
import { getProductListByPage, deleteProduct } from '@/api/index';
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EditProductDialog from './EditProductDialog.vue'
import AddProductDialog from './AddProductDialog.vue'
import { Delete, Edit, Search, RefreshRight, Plus } from '@element-plus/icons-vue'

const loading = ref(false)

const queryForm = ref({
    limit: 10,
    page: 1,
    keyword: ''
});

const productList = ref(undefined);

const total = ref(0);

const addProductDialogVisible = ref(false)

const editProduct = ref(null);

getData()

// 获取数据
function getData() {
    loading.value = true
    getProductListByPage(queryForm.value).then(res => {
        console.log(res, '商品列表');
        loading.value = false;
        if (res.code === 200) {
            productList.value = res.data.rows;
            total.value = res.data.total;
        } else {
            ElMessage.error(res.msg)
        }
    }).catch(() => {
        loading.value = false
    });
}
// 监听用户点击删除
function handleDelete(product) {
    ElMessageBox.confirm(
        `确认删除商品${product.name}?`,
        '确认提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                    // 确认删除数据
                    instance.confirmButtonLoading = true
                    instance.confirmButtonText = '处理中...'
                    deleteProduct(product.id).then(res => {
                        if (res.code === 200) {
                            ElMessage.success(res.msg)
                            getData()
                            done()
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
                } else {
                    done()
                }
            },
        }
    ).then(() => {
    })
}
// 监听用户点击编辑
function handleEdit(product) {
    editProduct.value = product
}
// 修改完成
function onEditDone() {
    getData()
    editProduct.value = null
}
// 添加完成
function onAddDone(){
    getData()
    addProductDialogVisible.value = false
}
</script>